<template>
  <NModal :show="state.show" @UpdateShow="close">
    <div ref="modalRef" class="list-dia">
      <MacHeader
        :title="state.title"
        :isFullscreen="isFullscreen"
        :showDesc="false"
        @toggle="toggle"
        @close="close"
      />
      <div class="content">
        <div class="pb20">
          <NButton
            type="primary"
            @click="
              handAdd({
                ...addDefaultInfo,
                brandId: tableInfo.queryForm.brandId
              })
            "
          >
            <i class="esayIcon esayIcon-tianjiawenjianjia"></i>
            <span class="add-text">添加</span>
          </NButton>
        </div>
        <NDataTable
          :loading="tableInfo.listLoading"
          :columns="columns"
          :data="tableInfo.tableData"
          :pagination="false"
        />
        <div class="pagination">
          <NPagination
            v-model:page="tableInfo.queryForm.pageNo"
            :page-count="tableInfo.total"
            :page-sizes="tableInfo.pageSizes"
            show-quick-jumper
            show-size-picker
            @updatePage="pageChange"
            @updatePageSize="sizeChange"
          />
        </div>
      </div>
      <ChapterEdit ref="addRef" @success="fetchData" />
      <DelConfirm ref="delRef" @confirm="delConfirm" />
    </div>
  </NModal>
</template>
<script setup lang="ts">
import { ref, reactive, h } from 'vue'
import type { Ref } from 'vue'
import {
  DataTableColumns,
  NButton,
  NModal,
  NDataTable,
  NPagination
} from 'naive-ui'
import MacHeader from '@/components/codeBlock/MacHeader'
import { useFullscreen } from '@vueuse/core'
import DelConfirm from '@/components/nComponents/DelConfirm'
import ChapterEdit from './ChapterEdit.vue'
import chapterList from '@/service/api/audio/chapter'
import { useApi } from '@/hooks/useApi'
const addDefaultInfo: { name: string; typeName: string; sort: number } =
  reactive({
    name: '',
    typeName: '',
    sort: 1
  })

const addRef: Ref<any> = ref()
const delRef: Ref<any> = ref()
const {
  tableInfo,
  pageChange,
  sizeChange,
  fetchData,
  queryData,
  handAdd,
  handDel,
  delConfirm
} = useApi({
  isRequest: false,
  addRef,
  delRef,
  getData: chapterList.list,
  delData: chapterList.dels,
  initForm: {
    superiorId: '',
    name: ''
  }
})

const columns: DataTableColumns<any> = [
  {
    title: '章节名称',
    key: 'name'
  },
  {
    title: '时常',
    key: 'duration'
  },
  {
    title: '链接',
    key: 'url',
    width: 200,
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '权重',
    key: 'sort'
  },
  {
    title: '操作',
    key: 'total',
    width: 200,
    render(row) {
      return h('div', [
        h(
          NButton,
          {
            size: 'small',
            type: 'warning',
            class: 'ml10',
            onClick: () => handAdd(row)
          },
          { default: () => '编辑' }
        ),
        h(
          NButton,
          {
            size: 'small',
            class: 'ml10',
            type: 'error',
            onClick: () => handDel(row)
          },
          { default: () => '删除' }
        )
      ])
    }
  }
]

const state = reactive({
  show: false,
  title: ''
})
const modalRef: Ref<any> = ref()
const {
  isFullscreen,
  toggle
}: { isFullscreen: Ref<boolean>; toggle: () => Promise<void> } =
  useFullscreen(modalRef)
const close = () => {
  state.show = false
}
const open = (row: any): void => {
  state.title = row.name
  tableInfo.queryForm.superiorId = row.id
  queryData()
  state.show = true
}

defineExpose({
  open
})
</script>
<style scoped lang="scss">
.list-dia {
  width: 800px;
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  .add-text {
    margin-left: 10px;
  }
  .pb20 {
    padding-bottom: 20px;
  }
  .pagination {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
